<template>
	<view class="order_wrapper">		
		<Tabs :sendData="tabConfig" @changeTabs="changeTabs" />
		<view class="order_list" v-if="orderList.length > 0">
			<view class="order_item" v-for="item in orderList" :key="item.id">
				<view class="order_up" @click="GotoDetail(item.type,item.order_info_id)">
					<view class="picture">
						<img :src="item.cover" alt="" @error="tabErrorPicture(item.id)" />
					</view>
					<view class="chat_intro">
						<view class="title">{{item.title}}</view>
						<view class="price">￥<text>{{item.price}}</text></view>		
					</view>
				</view>
				<view class="order_down">					
					<button class="evaluate" v-if="item.paid == 1" @click="GotoEvalution(item)">去评价</button>
					<button class="evaluate" v-if="item.paid == 0" @click="GotoPayment(item.id)">继续付款</button>
					<button class="evaluate" v-if="item.paid == 2" @click="GotoPayment(item.id)">退款</button>
					<button class="contact" v-if="item.paid == 2 || item.paid == 1 || item.paid == 0" @click="contactServer(item.id)">联系客服</button>		
				</view>
			</view>
			<view class="noMore">没有更多数据了哦~~</view>
		</view>
		<view class="noData" v-else>
			<i class="iconfont icon-zanwushuju"></i>
			<text class="name">暂无数据</text>
		</view>
	</view>
</template>

<script>
	import { api_getAllOrderList } from '@/api/api'
	import * as type from '../../utils/device'
	import Tabs from '@/components/custom_tabs/index.vue'
	export default {
		components: { Tabs },
		data() {
			return {
				tabConfig: {
					index: 0,
					activeColor: '#333',
					activeBorderColor: '#f00',
					list: ['全部','待付款','待收货','待评价','退款'],
				},
				blankObj: {
					'0': 99,
					'1': 0,
					'2': 2,
					'3': 1,
					'4': 3,
				},
				errorProduct: require('@/static/img/default_image.jpg'), 
				total: 0,
				orderList: [] 
			}
		},
		computed: {
			device(){
				return type.default;
			}
		},
		onLoad(options) {		
			this.init(options);
		},
		created(){
			
		},
		methods: {
			init(opt){	// 初始化
				this.tabConfig.index = opt.subIndex;
				let query = {
					paid: this.blankObj[this.tabConfig.index],
					page: 1,
					limit: 10000
				}
				uni.showLoading({ title: '数据加载中...' })
				api_getAllOrderList(query).then(res => {
					let { code,data: {orderlist,total},msg } = res;
					uni.hideLoading();
					if (code == 1) {
						this.orderList = orderlist;
						this.total = total;
					} else {						
						uni.showToast({ title: msg,icon: 'error' });
					}
				}).catch(err => {
					uni.hideLoading();
					console.log(err)
				});
			},
			GotoDetail(type,id){	// 订单列表item项
				type == 'column' && uni.navigateTo({ url: `/pages/product/index?id=${id}`});
				type == 'exam' && uni.navigateTo({ url: `/pages/examcontent/index?id=${id}`});
				type == 'video' && uni.navigateTo({ url: `/pages/videocontent/index?id=${id}`});
				type == 'audio' && uni.navigateTo({ url: `/pages/audiocontent/index?id=${id}`});
				type == 'image_text' && uni.navigateTo({ url: `/pages/image_textcontent/index?id=${id}`});
			},
			changeTabs(i){	// 面包屑导航接收值
				const pages = getCurrentPages();
				const currentRoute = this.device == 'MP-WEIXIN' ? '/'+pages[pages.length - 1].route : pages[pages.length - 1].$route.path;
				uni.redirectTo({ url: `${currentRoute}?subIndex=${i}` });
			},
			tabErrorPicture(id){	// 学习记录列表图片加载失败
				let i = this.orderList.findIndex(v => v.id == id);
				this.orderList[i].cover = this.errorProduct;		
			},
			contactServer(id){	// 联系客服
				uni.navigateTo({ url: `/pages/chat_window/index?orderid=${id}` });
			},
			GotoPayment(id){	// 继续付款
				console.log('请在客户端付款！',id);
			},
			GotoEvalution(item){	// 去评价
				uni.navigateTo({ url: `/pages/evaluate/index?id=${item.id}&type=${item.type}` });
			},
			deleteRecording(id){	// 删除记录
				console.log('del',id);
			},
			nanoid(len = 6) {  // 生成随机数
			    if (len <= 11) {
			        return Math.random().toString(36).slice(2,2+len).padEnd(len,'0')   
			    } else {
			        return this.nanoid(11) + this.nanoid(len - 11)   
			    }    
			}
		}
	}
</script>

<style lang="scss" scoped>
.order_wrapper{
	.order_list{
		.order_item{
			padding: 10px 10px 10px 15px;
			box-sizing: border-box;
			background-color: #fafafa;
			margin: 0 0 10px 0;
			.order_up{
				display: flex;
				.picture{
					width: 80px;
					height: 80px;
					overflow: hidden;
					img{
						display: block;
						width: 80px;
						height: 80px;
						margin: 0;
					}
				}
				.chat_intro{
					padding: 0 0 0 10px;
					box-sizing: border-box;
					.title{
						font-size: 13px;
						color: #666;
						margin: 0 0 10px 0;
					}
					.price{
						font-size: 13px;
						padding: 5px 0;
					}					
				}
			}
			.order_down{
				padding: 10px 0 0;
				overflow: hidden;
				button{
					float: right;
					font-size: 12px;
					line-height: 24px;
					background-color: #fff;
					padding: 0 10px;
					margin: 0 0 0 10px;					
					&::after{
						border: 1px solid #aeaeae;
					}
				}
				.evaluate{
					color: #ee0a24;
					border-color: #ee0a24;
					&::after{
						border: 1px solid #ee0a24;
					}
				}
			}
		}
		.noMore{
			font-size: 14px;
			text-align: center;
			color: #ccc;
			margin: 20px 0 0;
		}
	}
	.noData{
		padding: 50px 0 0;
		margin: 0 auto;
		text-align: center;
		.iconfont{
			display: block;
			margin: 0 auto;
			font-size: 100px;
			color: gray;
		}
		.name{
			font-size: 14px;
			color: #999;
		}
	}
}
</style>
